<div class="row no-gutter">
  <div class="d-none d-md-flex col-md-4 col-lg-6 bg-image"></div>
  <div class="col-md-8 col-lg-6">
    <div class="login d-flex align-items-center py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-9 col-lg-8 mx-auto">
            <h3 class="login-heading mb-4">
              <img id="login-logo" src="/assets/img/datagerry_logo.svg" class="img-fluid mx-auto d-block animated"
                   alt="DATAGERRY"/>
            </h3>
            <form id="login-form" [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="position-relative">
              <div class="form-label-group">
                <input type="text" class="form-control" placeholder="Username" formControlName="username"
                       [ngClass]="{ 'is-invalid': submitted && controls.username.errors }" required autofocus>
              </div>

              <div class="form-label-group">
                <input type="password" formControlName="password" placeholder="Password" class="form-control"
                       [ngClass]="{ 'is-invalid': submitted && controls.password.errors }" required>
              </div>
              <button [disabled]="!loginForm.valid" type="submit" id="login-button"
                      class="btn btn-lg btn-primary btn-block btn-login text-uppercase font-weight-bold mb-2">Login
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <ul class="nuts">
      <li *ngFor="let number of [0,1,2,3,4,5,6,7,8,9]" [inlineSVG]="'/assets/img/nut.svg'">
      </li>
    </ul>
  </div>
</div>
